<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title></title>
    <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="icon" href="/static/image/code.png">
</head>
<body class="body">

<div class="layui-row layui-col-space12">
    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
        <!-- 表格 -->
        <table id="userTable" lay-filter="userTable"></table>
        <!-- 表格工具栏 -->
        <script type="text/html" id="toolbar">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="add">添加</button>
                <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除
                </button>
                <button class="layui-btn layui-btn-sm" lay-event="refresh">刷新表格
                </button>
            </div>
        </script>
    </div>
</div>
<!-- 表格操作按钮集 -->
<script type="text/html" id="barOption">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>

<script type="text/javascript" src="/static/plugins/layui/layui.js"></script>
<script type="text/javascript" src="/static/js/module.js"></script>
<script type="text/javascript">
    // layui方法
    layui.use(['form', 'table', 'layer', 'comm', 'treeSelect'], function () {

        // 操作对象
        var form = layui.form
            , table = layui.table
            , layer = layui.layer
            , $ = layui.jquery
            , treeSelect = layui.treeSelect
            , comm = layui.comm;

        var tableData = new Array();
        var ids = new Array();

        var renderTable = function () {
            table.render({
                elem: '#userTable'
                , toolbar: '#toolbar'
                , height: comm.getFullHeight()
                , cols: [
                    [
                        {checkbox: true},
                        {field: 'username', title: '用户名称', width: '10%'},
                        {field: 'accountNumber', title: '登录名', width: '10%'},
                        {field: 'orgName', title: '所属机构', width: '10%'},
                        {field: 'roleName', title: '角色', width: '10%'},
                        {field: 'loginTime', title: '登录时间', width: '15%'},
                        {field: 'remark', title: '备注', width: '15%'},
                        {field: 'status', title: '用户状态', width: '10%'},
                        {
                            fixed: 'right',
                            title: '操作',
                            width: '20%',
                            align: 'center',
                            toolbar: '#barOption'
                        }
                    ]
                ]
                , url: '/user/queryAll'
                , id: 'id'
                , method: 'get'
                , page: true
                , limits: [30, 60, 90, 150, 300]
                , limit: 30
                , loading: false
                , done: function (res) {
                    tableData = res.data;
                }
            });
        }

        renderTable();

        //头工具栏事件
        table.on('toolbar(userTable)', function (obj) {
            switch (obj.event) {
                case 'add':
                    addUser();
                    break;
                case 'delete':
                    delUser(null);
                    break;
                case 'refresh':
                    renderTable();
                    break;
            }
        });

        table.on('checkbox(userTable)', function (obj) {
            if (obj.checked == true) {
                if (obj.type == 'one') {
                    ids.push(obj.data.id);
                } else {
                    for (var i = 0; i < tableData.length; i++) {
                        ids.push(tableData[i].id);
                    }
                }

            } else {
                if (obj.type == 'one') {
                    for (var i = 0; i < ids.length; i++) {
                        if (ids[i] == obj.data.id) {
                            ids.splice(i, 1);
                        }
                    }
                } else {
                    for (var i = 0; i < ids.length; i++) {
                        for (var j = 0; j < tableData.length; j++) {
                            if (ids[i] == tableData[j].id) {
                                ids.splice(i, 1);
                            }
                        }
                    }
                }
            }
        });


        //监听工具条
        table.on('tool(userTable)', function (obj) {

            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'del') {
                delUser(data.id);
            } else if (layEvent === 'edit') {
                editUser(data);
            }
        });

        /**
         * 添加用户数据
         */
        function addUser() {
            document.getElementById("userDetailForm").reset();
            // 移除多余的treeSelect
            if ($('.layui-treeSelect')) {
                $('.layui-treeSelect').remove();
            }
            renderTreeSelect(null);
            renderSelect(null);
            comm.open($('#userDetail'), function (index, layero) {
                var formData = comm.getFormData('userDetailForm');
                formData.orgId = treeSelect.zTree('orgTree').getSelectedNodes()[0].id;
                formData.status = $('#status').attr('checked') == 'checked' ? 1 : 0;
                comm.post('/user/editUser?oper=0', formData, function (respData) {
                    if (respData.code == 0) {
                        // 提示成功
                        layer.msg("操作成功");
                        // 关闭弹框
                        layer.close(index);
                        // 刷新表格
                        renderTable();
                    }
                });
            });
        }

        /**
         * 编辑用户数据
         *
         * @param data 数据
         */
        function editUser(data) {
            $('#username').val(data.username);
            $('#accountNumber').val(data.accountNumber);
            $('#password').val(data.password);
            $('#remark').val(data.remark);
            if (data.status == 1) {
                $('#status').attr("checked");
            } else {
                $('#status').removeAttr("checked");
            }
            form.render("checkbox");
            renderSelect(data.roleId);
            // 移除多余的treeSelect
            $('.layui-treeSelect').remove();
            // 加载并选中
            renderTreeSelect(data.orgId);

            comm.open($('#userDetail'), function (index, layero) {
                var formData = comm.getFormData('userDetailForm');
                formData.id = data.id;
                formData.status = $('#status').attr('checked') == 'checked' ? 1 : 0;
                comm.post('/user/editUser?oper=1', formData, function (respData) {
                    if (respData.code == 0) {
                        // 提示成功
                        layer.msg("操作成功");
                        // 关闭弹框
                        layer.close(index);
                        // 刷新表格
                        renderTable();
                    }
                });
            })

        }

        /**
         * 删除用户数据
         *
         * @param id
         */
        function delUser(id) {
            var requestParam;
            if (id == null) {
                if (ids.length == 0) {
                    layer.msg("至少选择一条记录");
                    return;
                }
                requestParam = {
                    ids: ids
                }
            } else {
                requestParam = {
                    id: id
                }
            }

            layer.confirm("确认删除吗？", function (index, layero) {
                comm.post('/user/editUser?oper=2', requestParam, function (respData) {
                    if (respData.code == 0) {
                        // 提示成功
                        layer.msg("操作成功");
                        // 关闭弹框
                        layer.close(index);
                        // 刷新表格
                        renderTable();
                    }
                })
            });
        }

        var renderTreeSelect = function (orgId) {
            treeSelect.render({
                // 选择器
                elem: '#orgTree',
                // 数据
                data: '/org/getTreeData',
                // 异步加载方式：get/post，默认get
                type: 'get',
                // 占位符
                placeholder: '修改默认提示信息',
                // 是否开启搜索功能：true/false，默认false
                search: true,
                // 点击回调
                click: function (d) {
                    console.log(d.current);
                },
                // 加载完成后的回调函数
                success: function (d) {
                    if (orgId != null) {
                        treeSelect.checkNode('orgTree', orgId);
                    }
                }
            });
        };

        /**
         * 初始化下拉框
         */
        function renderSelect(roleId) {
            $('select[name="roleId"]').empty();
            // 新增
            comm.get('/role/queryAll', function (respData) {
                var options = '';
                $.each(respData.data, function (i, item) {
                    if (roleId != null && item.id == roleId) {
                        options += '<option value="' + item.id + '" selected>' + item.roleName + '</option>'
                    } else {
                        options += '<option value="' + item.id + '">' + item.roleName + '</option>'
                    }
                });
                $('select[name="roleId"]').append(options);
                form.render('select');
            });
        }


        form.on('switch(status)', function (data) {
            if (this.checked) {
                $('#status').attr("checked", "");
            } else {
                $('#status').removeAttr("checked");
            }
        });

    });


</script>
</body>
<div id="userDetail" style="display: none">
    <div class="layui-col-xs11 layui-col-sm11 layui-col-md11">
        <form id="userDetailForm" class="layui-form" action="">
            <div class="layui-form-item">
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户名称</label>
                <div class="layui-input-block">
                    <input type="text" id="username" name="username" lay-verify="username"
                           autocomplete="off"
                           placeholder="请输入用户名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">登录名</label>
                <div class="layui-input-block">
                    <input type="text" id="accountNumber" name="accountNumber"
                           lay-verify="accountNumber"
                           autocomplete="off"
                           placeholder="请输入登录名" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">登录密码</label>
                <div class="layui-input-block">
                    <input type="text" id="password" name="password" lay-verify="password"
                           autocomplete="off"
                           placeholder="请输入登录密码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <input type="text" id="remark" name="remark" lay-verify="remark"
                           autocomplete="off"
                           placeholder="请输入备注" class="layui-input">
                </div>
            </div>
            <div id="orgItem" class="layui-form-item">
                <label class="layui-form-label">组织机构</label>
                <div class="layui-input-block">
                    <input type="text" id="orgTree" lay-verify="orgTree" class="layui-input"
                           lay-filter="orgTree">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">所属角色</label>
                <div class="layui-input-block">
                    <select id="roleId" name="roleId" lay-filter="roleId">
                        <option value=""></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item" pane="">
                <label class="layui-form-label">用户状态</label>
                <div class="layui-input-block">
                    <input type="checkbox" id="status" checked="" name="status" lay-skin="switch"
                           lay-filter="status" lay-text="启用|禁用" title="开关">
                </div>
            </div>
        </form>
    </div>
</div>
</html>